<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .infoDiv{
            position: absolute;
            top: 100px;
            left: 0px;
            width: 400px;
            height: 500px;
            padding-left: 50px;
            line-height: 100px;
            visibility: hidden;
        }
        .hidDiv{
            position: absolute;
            background-color: #6f57ff;
            left: 400px;
            width: 1000px;
            height: 500px;

        }
        .contentDiv{

            visibility: hidden;

            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255,0,0,0.5);

        }
    </style>
    <script src="book.js"></script>
    <script src="bookService.js"></script>

</head>
<body>
<h1>图书一览</h1>
<div class="infoDiv" id="findDiv">
    图书名:<span id="nameSpan"></span><br>
    作者:<span id="authorSpan"></span><br>
    出版时间:<span id="timeSpan"></span><br>
    售价:<span id="priceSpan"></span><br>
    <img src="" alt=" " id="imgSpan" style="position: absolute;right: 0;top: 50px;width: 80px;height: 80px">
</div>

<table border="1" width="60%" style="margin-left:450px">
    <thead>
    <tr>
        <th>模板</th>
        <th>图书名</th>
        <th>作者</th>
        <th>销售价</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody id="data"></tbody>
</table>

<div style="margin-left: 450px">
图书名:<input type="text" id="nameTxt" style="">

<input type="button" value="查找" onclick="findByName()"><br>
<input type="button" value="查看购物车" onclick="findCarInfo()"></div>
<div class="contentDiv" id="contentDiv">
<div class="hidDiv" id="carDiv">
    <table border="1" width="80%">
        <thead>
        <tr>
            <th>商品名</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>移除商品</th>
        </tr>
        </thead>

        <tbody id="datas">

        </tbody>
    </table>
    <div>
        <input type="button" value="继续购物" onclick="hiddena()">
        <span id="sumPrice"></span>
    </div>
</div>
</div>
</body>
</html>